/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-16 17:54:51
 * @LastEditTime: 2023-04-12 17:34:58
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Center,
  Flex,
  Image,
  Stack,
  Tag,
  Text,
  useColorModeValue,
  Wrap,
  WrapItem,
} from '@chakra-ui/react';
import { IconClick, IconColorPickerOff } from '@tabler/icons-react';
import IAIIconButton from 'common/components/IAIIconButton';
import { setSelectedArtist } from 'features/parameters/store/presetSlice';
import { useMemo } from 'react';
import { MdOutlineImageNotSupported } from 'react-icons/md';

import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import ArtistCarousel from './ArtistCarousel';

export interface ArtistImage {
  imageDesc: string;
  imageSrc: string;
}
export interface Artist {
  id: string;
  name: string;
  avatarSrc?: string;
  tags?: Array<string>;
  desc?: string;
  images?: ArtistImage[];
  [k: string]: any;
}
const notEmptyArray = (arr: any): boolean =>
  Array.isArray(arr) && arr.length > 0;
export const ArtistItem = (props: { artist: Artist }) => {
  const { name, avatarSrc, tags, desc, images, id } = props.artist;

  const url = avatarSrc?.startsWith('http')
    ? avatarSrc
    : `${import.meta.env.VITE_APP_FILE_URL}${avatarSrc}`;

  const { selectedArtist } = useAppSelector((store) => store.preset);
  const dispatch = useAppDispatch();
  const selected = useMemo(
    () => selectedArtist.indexOf(id) >= 0,
    [selectedArtist, id]
  );
  const tagBg = useColorModeValue('gray.50', 'gray.800');
  const textC = useColorModeValue('gray.700', 'gray.400');
  const handleSelectArtist = () => {
    const _selectedArtist = [...selectedArtist];
    if (selected) {
      const index = _selectedArtist.indexOf(id);
      _selectedArtist.splice(index, 1);
    } else {
      _selectedArtist.push(id);
    }
    dispatch(setSelectedArtist(_selectedArtist));
  };

  return (
    <Center pos="relative">
      <Box
        maxW="320px"
        w="full"
        bg={useColorModeValue('base.950', 'base.900')}
        boxShadow="2xl"
        borderRadius="base"
        p={4}
        textAlign="center"
      >
        {images && notEmptyArray(images) ? (
          <ArtistCarousel cards={images} {...props.artist} />
        ) : (
          <Box>
            {avatarSrc ? (
              <Image
                height={120}
                w="100%"
                objectFit="cover"
                borderRadius="base"
                src={url}
                loading="lazy"
              />
            ) : (
              <Flex height={120} justify="center" align="center">
                <MdOutlineImageNotSupported />
              </Flex>
            )}
            <Text
              textAlign="center"
              color={textC}
              p={1}
              sx={{
                display: '-webkit-box',
                WebkitLineClamp: '2',
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
              }}
            >
              {desc}
            </Text>
          </Box>
        )}

        <Flex p={1} justify="space-between" align="center">
          {/* <Avatar src={avatarSrc} name={name} /> */}
          <Stack direction="column" spacing={0} fontSize="sm">
            <Text align="left" mb={1} fontWeight={600}>
              {name}
            </Text>
            <Wrap spacing="3px">
              {tags?.map((t) => (
                <WrapItem key={t + name}>
                  <Tag display="inline" size="xs" bg={tagBg} fontWeight="400">
                    {t}
                  </Tag>
                </WrapItem>
              ))}
            </Wrap>
          </Stack>
          <IAIIconButton
            tooltip={selected ? '取消选择' : `选择艺术家`}
            aria-label={selected ? '取消选择' : `选择艺术家`}
            icon={selected ? <IconColorPickerOff /> : <IconClick />}
            onClick={handleSelectArtist}
            isChecked={selected}
          />
        </Flex>
      </Box>
    </Center>
  );
};

export default ArtistItem;
